<template>
    <p>Vuex</p>
    <p>cont1:{{ count }}</p>
    <p>cont2:{{ this.$store.state.count }}</p>
    <p>test:{{ test }}</p>
    <p>countAli:{{ countAli }}</p>
    <p>getters---------------------</p>
    <p>countAdd1314:{{ countAdd1314 }}</p>
    <p>Mutation---------------------</p>
    <button @click="addMut">addMut</button>
    <button @click="addPlayloadMut">addPlayloadMut</button>
    <button @click="add">add</button>
    <button @click="addCommit">addCommit</button>
    <button @click="addAlias">addAlias</button>
    <p>Actation---------------------</p>
    <button @click="addActionMut">addActionMut</button>
    <button @click="asyncAddActionMut">asyncAddActionMut</button>
    <button @click="asyncAddPlayloadActionMut">asyncAddPlayloadActionMut</button>
    <button @click="addAction">addAction</button>
    <button @click="addActionDispatch">addActionDispatch</button>
    <button @click="addActionAlias">addActionAlias</button>
    <p>模块====================</p>
    <p>模块的state数据:{{ $store.state.b.countB }}</p>
    <p>模块的getter数据:{{ $store.getters['b/countBB'] }}</p>
    <button @click="commitIncreaseB">触发模块Bmution</button>
    <button @click="commitAsyncIncreaseB">触发模块action</button>
    <p>MapXXXX</p>
    <p>模块B的state</p>
    <p>countB::{{ countB }}</p>
    <p>mutation</p>
    <button @click="increaseB">increaseB</button>
</template>

<script>
import{mapState,mapGetters,mapMutations,mapActions}from 'vuex'
export default{
    computed:{
        // count(){
        //     return this.$store.state.count
        // },
        //数组形式
        // ...mapState(['count','test'])
        //对象
        ...mapState({
            //  count:state => state.count,
            //  test:state => state.test
             count:'count',
             test:'test',
             countAli:'count'
        }),
        // countAdd1314(){
        //     return this.$store.getters.countAdd1314
        // },
        //数组写法
        // ...mapGetters(['countAdd1314'])
        ...mapGetters({
            countAdd1314:'countAdd1314'
        }),
        ...mapState('b',['countB'])
        
    },
    methods:{
        addMut(){
            this.$store.commit('add')
        },
        addPlayloadMut(){
            this.$store.commit('addPlayload',{num:10})
        },
        addCommit(){
            this.addPlayload({num:20})
        },
        ...mapMutations({
            add:'add',
            addAlias:'add',
            addPlayload:'addPlayload'
        }),
        
        addActionMut(){
            this.$store.dispatch('addAction')
        },
        asyncAddActionMut(){
            this.$store.dispatch('asyncAddAction')
        },
        asyncAddPlayloadActionMut(){
            this.$store.dispatch('asyncAddPlayloadAction',{num:20})
        },
        ...mapActions(['addAction','asyncAddPlayloadAction']),
        addActionDispatch(){
            this.asyncAddPlayloadAction({num:30})
        },
        ...mapActions({
            addAction:'addAction',
            addActionAlias:'addAction',
            asyncAddPlayloadAction:'asyncAddPlayloadAction'
        }),
        commitIncreaseB(){
            this.$store.commit('b/increaseB')
        },
        commitAsyncIncreaseB(){
            this.$store.dispatch('b/asyncIncreaseB')
        },
        ...mapMutations('b',['increaseB'])

    },
    mounted(){
    console.log(this.$store);
    }
}
</script>